<template>
	<div class="wy-main business-circuit">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >管理我的线路</span>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
		</a-row>
		<!-- <div style="text-align: right;">
			<a-select style="width: 200px;" placeholder="请选择出发地">
				<a-select-option value="val1"> 请选择出发地 </a-select-option>
			</a-select>
			<a-select  style="width: 200px;margin-right: 10px;"placeholder="请选择目的地">
				<a-select-option value="val1"> 请选择目的地 </a-select-option>
			</a-select>
			<a href="javascript:;" style="margin-right: 10px;">搜索</a>
		    <a href="javascript:;" style="margin-right: 10px;">清空</a>
		</div> -->
		<div>
			<a-input v-model="fromCity" readOnly @click="departureShowMap" placeholder="请选择出发地" class="wy-w-200" />
			<a-input v-model="toCity" readOnly  @click="destinationShowMap" placeholder="请选择到达地" class="wy-w-200 wy-m-l-10" />
			<a-button type="primary" class="wy-m-l-10" @click="getLine">点击查询</a-button>
			<a-button class="wy-m-l-10" @click="reset">重置信息</a-button>
			<!--<router-link to="/business/circuit/publish">
				<a-button type="primary" class="wy-float-r">新增线路</a-button>
			</router-link>-->
			<router-link to="/business/circuit/publish">
				<a-button type="primary" class="wy-m-l-10 wy-float-r"  v-hasPermission="'line:add'">新增线路</a-button>
			</router-link>
			<a-button type="primary" class="wy-m-l-10 wy-float-r"  v-hasPermission="'line:add2'" @click="$refs.autoError.handleShow()">新增线路</a-button>
		</div>
	<div class="wei_route_choice">
		<a-table class="wy-m-t-20" :columns="columns" :dataSource="data" :rowKey="record => record.lineId" :pagination="pagination" @change="handleTableChange" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
			<!--<span slot="fromCity" slot-scope="text, record">{{record.fromProvince}}-{{record.fromCity}}-{{record.fromCounty}}</span>
			<span slot="toCity" slot-scope="text, record">{{record.toProvince}}-{{record.toCity}}-{{record.toCounty}}</span>-->
			<span slot="createTime" slot-scope="text, record">
				{{record.createTime&&record.createTime.split(' ')[0]}}
			</span>
			<span slot="validDay" slot-scope="text, record">
				<span v-if="!text">长期有效</span>
				<span v-if="text">{{text}}</span>
			</span>
			<span slot="lineType" slot-scope="text, record">
				<span v-if="record.lineType==1">公路运输</span>
				<span v-if="record.lineType==2">铁路运输 </span>
				<span v-if="record.lineType==3">航空运输</span>
				<span v-if="record.lineType==4">海路运输</span>
			</span>
      <span slot="approvalStatus" slot-scope="text, record">
        <span class="wei_warning" v-if="record.approvalStatus==106">待审核</span>
        <span class="wei_primary" v-if="record.approvalStatus==107">审核通过</span>
        <span class="wei_danger" v-if="record.approvalStatus==108">审核失败</span>
      </span>
			<span slot="action" slot-scope="text, record">
		      <a href="javascript:;" @click="seeLine(record)">查看</a>
		      <a-divider type="vertical" v-if="record.approvalStatus == '108'" />
		      <a href="javascript:;" @click="editLine(record)" v-if="record.approvalStatus == '108'"> 修改</a>
		      <a-divider type="vertical" />
		      <a @click="delLine([record.lineId])">删除</a>
		    </span>
		</a-table>
			</div>
		<div style='margin-top: -55px;'>
			<a-button @click="delAll">删除所选</a-button>
		</div>
		<a-modal
	      :title="type=='edit'?'编辑':'查看详情'"
	      :visible="visible"
	      @cancel="handleCancel"
	      width="900px"
	      :footer="null" class='send-new-model'>
		    <div class="business-circuit">
		      	<PublishForm v-if="visible" :isSee="isSee" :lineType="lineType" :type="type" :detail="detail" @handleCancel="editHandleCancel"></PublishForm>
		    </div>
	    </a-modal>
		<map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
		<!--未认证弹窗-->
		<auto-error  ref="autoError" ></auto-error>
	</div>
</template>
<script>
	import MapSvg from '@/components/dialog/MapSvg'
	import PublishForm from './components/PublishForm'
	import AutoError from '@/components/dialog/AutoError'
	const columns = [{
			title: '运输方式',
			dataIndex: 'lineType',
			scopedSlots: {
				customRender: 'lineType'
			},
			key: 'lineType',
		},
		{
			title: '出发地',
			key: 'beginPlace',
			dataIndex: 'beginPlace',
			scopedSlots: {
				customRender: 'beginPlace'
			},
		},
		{
			title: '到达地',
			key: 'endPlace',
			dataIndex: 'endPlace',
			scopedSlots: {
				customRender: 'endPlace'
			},
		},
		{
			title: '有效期',
			key: 'validDay',
			dataIndex: 'validDay',
			scopedSlots: {
				customRender: 'validDay'
			},
		},
		{
			title: '发布日期',
			dataIndex: 'createTime',
			key: 'createTime',
			scopedSlots: {
				customRender: 'createTime'
			},
		},
		{
			title: '浏览量',
			dataIndex: 'lookNums',
			key: 'lookNums',
		},{
			title: '审核状态',
			dataIndex: 'approvalStatusValue',
			key:'approvalStatusValue',
			width:100,
		  scopedSlots: {
				customRender: 'approvalStatus'
			},
		},
		{
			title: '操作',
			key: 'action',
			scopedSlots: {
				customRender: 'action'
			},
		}
	];
	export default {
		data() {
			return {
				visible: false,
				type: '',
				isSee:true,
				detail: {},
				data: [],
				columns,
				pagination: {
					pageSizeOptions: ['10', '20', '30', '40', '100'],
					defaultCurrent: 1,
					defaultPageSize: 10,
					total:10,
					showSizeChanger: true,
					showTotal: (total, range) => `共 ${total} 条记录`
				},
				fromCity: '',
				toCity: '',
				selectedRowKeys: [],
				lineType: 0, // 默认不显示线路
			}
		},
		components: {
			PublishForm,
			MapSvg,
			AutoError
		},
		beforeCreate() {
		},
		created() {
			this.getLine()
		},
		methods: {
			// 省市地图回调
			mapSvgCall(d) {
				if (d.name === 'departure') {
					this.fromCity = d.provCityArea
				}
				if (d.name === 'destination') {
					this.toCity = d.provCityArea
					
				}
			},
			// 选择出发地
			departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
			},
			// 选择到达地
			destinationShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
			},
			// 调用距离返回
			distanceCall(num) {
				// console.log(num)
			},
			// 重置
			reset () {
				this.pagination.defaultCurrent = 1;
				this.fromCity = '';
				this.toCity = '';
				this.getLine();
			},
			// 获取线路信息
			getLine(params = {}) {
				this.loading = true
				params.pageSize = this.pagination.defaultPageSize
				params.pageNum = this.pagination.defaultCurrent
				// params.mode = '1'
				this.$get('/info/line', {
					pageSize: this.pagination.defaultPageSize,
					pageNum: this.pagination.defaultCurrent,
					beginPlace: this.fromCity,
					endPlace: this.toCity
				}).then((r) => {
						console.log(r)
						this.loading = false
						this.data = r.data.data.rows
						this.pagination.total = r.data.data.total
					})
					.catch((e) => {
						console.log(e)
						this.loading = false;
					})
			},
			// 查看货物信息
			seeLine(data){
		        this.type = 'find';
		        this.lineType = data.lineType;
		        this.detail = data;
		        this.visible = true;
		        this.isSee = true;
			},
			// 编辑货物信息
			editLine(data){
		        this.type = 'edit';
		        this.lineType = data.lineType;
		        this.detail = data;
		        this.visible = true;
		        this.isSee = false;
			},
			handleCancel () {
				this.visible = false;
			},
			// 修改保存成功后回调
			editHandleCancel () {
				this.getLine();
				this.handleCancel();
			},
			// 选择事件
		    onSelectChange (selectedRowKeys) {
		      this.selectedRowKeys = selectedRowKeys
		    },
			// 全部删除
			delAll () {
				if (!this.selectedRowKeys.length) {
				  this.$message.warning('请选择需要删除的记录')
				  return
				}
			    let ids = this.selectedRowKeys
//			    for (let key of this.selectedRowKeys) {
//			    	alert(key)
//			      ids.push(this.data[key].lineId)
//			    }
			    this.delLine(ids)
			},
			// 删除线路信息
			delLine(arr) {
				let that = this
				this.$confirm({
					title: '确定删除所选中的记录?',
					content: '当您点击确定按钮后，这些记录将会被彻底删除',
					centered: true,
					onOk() {
						that.$delete('/info/line/' + String(arr)).then((d) => {
							console.log('删除线路信息 d::',d)
							that.$message.success('删除成功')
							that.getLine();
							that.selectedRowKeys = []
						})
					},
					onCancel() {
					}
				})
			},
			// 表格排序 分页 筛选事件
			handleTableChange(pagination, filters, sorter) {
				this.pagination.defaultPageSize = pagination.pageSize
			   	this.pagination.defaultCurrent  = pagination.current
			   	this.getLine();
				// this.getcarSource({
				//   ...this.queryParams
				// })
			},
		}
	}
</script>

<style lang="less" scoped>

</style>